<template>
  <div>
    <h1 class="title">{{title}}</h1>
    <div id="expertsList">
      <div class="expert" v-for="expert of experts">
        <div class="expertImg"><img  :src="expert.user.headImgUrl"/></div>
        <div class="expertInfo">
          <span class="name">{{expert.name}}</span><br/>
          <span>{{expert.education}}</span>
          <span>{{expert.age}}岁</span>
        </div>
        <p class="expertIntro">{{expert.introduction}}</p>
        <el-button class="btn" v-if="status===NOTCHOOSE" @click="chooseExpert(expert)">咨询</el-button>
        <el-button class="btn" v-if="status===CHOSEN" @click="testBegin">开始测试</el-button>
        <el-button class="btn" v-if="status===TESTED" @click="showResult">查看结果</el-button>
      </div>

      <transition name="paper-slide">
        <ul class="paper" v-if="paperVisible">
          <li v-for="(q,i) of questions">
            <p>{{i+1}}.{{q}}</p>
            <el-input type="text" v-model="answers[i]" :disabled="status===TESTED"></el-input>
          </li>
          <li>
            <el-button @click="submitAnswers" v-if="status!==TESTED">提交测试答案</el-button>
            <el-button @click="paperVisible = false" v-else>确定</el-button>
          </li>
        </ul>
      </transition>
    </div>
  </div>
</template>
<script>
  export default{
    name: '',
    data(){
      return {
        NOTCHOOSE:0,
        CHOSEN:1,
        TESTED:2,
        experts:[
          {
            "id": 1,
            "userId": {
              "id": 2,
              "num": "expert1",
              "type": 2,
              "nickname": "HMP",
              "headImgUrl": 'http://photo16.zastatic.com/images/photo/26693/106768157/1503930309865_2.png',
              "logTime": "2017-09-02 15:44:01"
            },
            "introduction": "史上最伟大的情感专家",
            "name": "黄茂鹏1",
            "education": "博士",
            "age": 24
          },
          {
            "id": 1,
            "userId": {
              "id": 2,
              "num": "expert1",
              "type": 2,
              "nickname": "HMP",
              "headImgUrl": 'http://photo16.zastatic.com/images/photo/26693/106768157/1503930309865_2.png',
              "logTime": "2017-09-02 15:44:01"
            },
            "introduction": "史上最伟大的情感专家",
            "name": "黄茂鹏2",
            "education": "博士",
            "age": 24
          },
          {
            "id": 1,
            "userId": {
              "id": 2,
              "num": "expert1",
              "type": 2,
              "nickname": "HMP",
              "headImgUrl": 'http://photo16.zastatic.com/images/photo/26693/106768157/1503930309865_2.png',
              "logTime": "2017-09-02 15:44:01"
            },
            "introduction": "史上最伟大的情感专家",
            "name": "黄茂鹏3",
            "education": "博士",
            "age": 24
          },
          {
            "id": 1,
            "userId": {
              "id": 2,
              "num": "expert1",
              "type": 2,
              "nickname": "HMP",
              "headImgUrl": 'http://photo16.zastatic.com/images/photo/26693/106768157/1503930309865_2.png',
              "logTime": "2017-09-02 15:44:01"
            },
            "introduction": "史上最伟大的情感专家",
            "name": "黄茂鹏4",
            "education": "博士",
            "age": 24
          },
        ],
        status:0,

//        心理测试相关的数据
        questions:['你是高富帅吗？','你单身吗？'],
        answers:['是的。','是的。'],
        paperVisible:false,
      }
    },
    methods: {

      getExpertsList(){
        this.$http({
          method: 'get',
          url: 'love/listExpert',
          params: {
            page:0,
            pageSize:6,
          }
        }).then((res)=>{
          if(res.status == 'SUCCESS'){
            this.experts = res.object.objects;
          }
          else{
            console.log('获取专家列表失败');
          }
        }).catch((err)=>{
          console.log('获取专家列表失败');
        })
      },
      getExpert(id){
        this.$http({
          method: 'get',
          url: 'love/getExpert',
          params: {
            id:id,
          }
        }).then((res)=>{
          if(res.status == 'SUCCESS')
            this.experts = [res.object];
          else{
            console.log('获取已选专家失败');
          }
        }).catch((err)=>{
          console.log('获取已选专家失败');
        })
      },
      getLoveColmun(){
        this.$http({
          method: 'get',
          url: 'love/getLove',
          params: {}
        }).then((res)=>{
          if(res.status == 'FAIL'){
            this.status = this.NOTCHOOSE;
            this.getExpertsList();
          }else{
            if(res.object.result){
              this.status = this.TESTED;
//            获取答案
              this.answers = res.object.result.split('；');
            }else{
              this.status = this.CHOSEN;
            }
//          获取题目
            this.questions = res.object.gxxlId?res.object.gxxlId.content.split('；'):[];
            this.getExpert(res.object.expertId.id);
          }
        }).catch((err)=>{

        })
      },
      chooseExpert(expert){
        this.$http({
          method: 'post',
          url: 'love/selectExpert',
          data: {"expert_id":id}
        }).then((response)=>{
          if(response.status == 'SUCCESS'){
            this.experts = [expert];
            this.$confirm('是否立即开始心理测试', '选择专家成功', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(() => {
              this.status = this.CHOSEN;
              this.testBegin();
            });
          }

        }).catch((err)=>{

        })

      },
      showResult(){
        if(this.questions.length != 0 && this.answers.length != 0){
          this.paperVisible = true;
        }
      },
      testBegin(){
//      length为0，说明用户没有选题目
        this.paperVisible = true;
        if(this.questions.length == 0){
          this.$http({
            method: 'get',
            url: 'love/getGxxl',
            params: {}
          }).then((response)=>{
            if(response.status == 'SUCCESS'){
              let questions = response.object.content.split('；');
              this.questions = questions;
              this.answers = new Array(questions.length);
              this.paperVisible = true;
            }
          }).catch((err)=>{
//            this.paperVisible = true;
          })
        }
      },
      submitAnswers(){
        this.paperVisible = false;

      }
    },
    computed:{
      title(){
        switch (this.status)
        {
          case this.NOTCHOOSE:return '情感专家列表';break;
          default:return '已选的情感专家';break;
        }
      }
    },
    created(){
      this.getLoveColmun();
    }
  }
</script>
<style scoped>
  .title{
    font-size: 1.1rem;
    color: #f85377;
    margin: 0.8rem 0.5rem 0rem;
  }
  #expertsList{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: space-around;
    overflow-x: hidden;
    overflow-y: auto;
    /*transition: all 2s ease-in-out;*/
  }
  .expert{
    margin: 1em;
    padding: 1.5em;
    max-width: 14em;
    border: 1px solid #80808057;
    border-radius: 0.8em;
    text-align: center;

  }
  .expertImg>img{
    width: 7em;
    height: 7em;
    border-radius: 0.3em;
  }
  .expertInfo{
    /*text-align: center;*/
    margin: 0.5em;
  }
  .expertInfo>span{
    padding: 0.1em 0.5em;
    color: gray;
  }
  .name{
    color: #f85377!important;
    font-size: 1.1em;
  }
  .expertIntro{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .btn{
    padding: 0.3em 1.5em;
  }
  .paper{
    flex-basis: 68%;
    list-style: none;
    padding-left: 0em;
    margin-left: 0.5em;
    margin-right: 0.5em;
  }
  .paper>li:last-child{
    margin-top: 1em;
    text-align: center;
  }
  .paper-slide-enter-active{
    transition: all 0.25s ease;
  }
  .paper-slide-leave-active{
    transition: all 0.25s ease;
  }
  .paper-slide-enter,.paper-slide-leave-to{
    transform: translateX(100%);
    /*flex-basis: 0%;*/
    opacity: 0;
  }
</style>